<!DOCTYPE HTML PUBspanC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mockup</title>
<link href="mockup2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<pre>
{
	"name" : "マティーニ",
	"proof" : 35,
	"howto" : "ステア",
	"base" : "ジン",
	"recipe" : {
		"ドライ・ジン" : "60ml",
		"ドライ・ベルモット" : "1dash",
		"オリーブ" : "1個",
		"レモンピール" : "適量"
	},
	"situation" : ["食前", "食後", "007", "1人飲み"]
}
</pre>

<dl>
	<dt>name</dt>
	<dd>マティーニ</dd>
	<dt>proof</dt>
	<dd>35</dd>
	<dt>howto</dt>
	<dd>ステア</dd>
	<dt>base</dt>
	<dd>ジン</dd>
	<dt>recipe</dt>
	<dd>
	<dl>
		<dt>ドライ・ジン</dt>
		<dd>60ml</dd>
		<dt>ドライ・ベルモット</dt>
		<dd>1dash</dd>
		<dt>オリーブ</dt>
		<dd>1個</dd>
		<dt>レモンピール</dt>
		<dd>適量</dd>
	</dl>
	</dd>
	<dt>situation</dt>
	<dd>
	<ol>
		<li>食前</li>
		<li>食後</li>
		<li>007</li>
		<li>1人飲み</li>
	</ol>
	</dd>
</dl>

<hr />

<pre>
{
	"キー":"バリュー",
	"キー":"バリュー",
	"キー":{
		"キー":"バリュー",
		"キー":"バリュー",
		"キー":{
			"キー":"バリュー",
			"キー":"バリュー"
		}
	}
}
</pre>

<dl>
	<dt>キー</dt>
	<dd>バリュー</dd>
	<dt>キー</dt>
	<dd>バリュー</dd>
	<dt>キー</dt>
	<dd>
	<dl>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dd>
		<dl>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dd>
			<dl>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dd>バリュー</dd>
			</dl>
			</dd>
		</dl>
		</dd>
	</dl>
	</dd>
</dl>

<!-- 
<pre>
[{
	"キー":"バリュー",
	"キー":"バリュー",
	"キー":{
		"キー":"バリュー",
		"キー":"バリュー",
		"キー":{
			"キー":"バリュー",
			"キー":"バリュー"
		}
	}
},
{
	"キー":"バリュー",
	"キー":"バリュー",
	"キー":{
		"キー":"バリュー",
		"キー":"バリュー",
		"キー":{
			"キー":"バリュー",
			"キー":"バリュー"
		}
	}
},
{
	"キー":"バリュー",
	"キー":"バリュー",
	"キー":{
		"キー":"バリュー",
		"キー":"バリュー",
		"キー":{
			"キー":"バリュー",
			"キー":"バリュー"
		}
	}
}]
</pre>

<ol>
	<li>
	<dl>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dl>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dl>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dl>
					<dt>キー</dt>
					<dd>バリュー</dd>
					<dt>キー</dt>
					<dd>バリュー</dd>
				</dl>
			</dl>
		</dl>
	</dl>
	</li>
	<li>
	<dl>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dl>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dl>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dl>
					<dt>キー</dt>
					<dd>バリュー</dd>
					<dt>キー</dt>
					<dd>バリュー</dd>
				</dl>
			</dl>
		</dl>
	</dl>
	</li>
	<li>
	<dl>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dd>バリュー</dd>
		<dt>キー</dt>
		<dl>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dd>バリュー</dd>
			<dt>キー</dt>
			<dl>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dd>バリュー</dd>
				<dt>キー</dt>
				<dl>
					<dt>キー</dt>
					<dd>バリュー</dd>
					<dt>キー</dt>
					<dd>バリュー</dd>
				</dl>
			</dl>
		</dl>
	</dl>
	</li>
</ol>
 -->

</body>
</html>